<template>
	<view class="message-item" :class="{ self: isSelf }">
		<!-- 时间标签 -->
		<time-tag :timestamp="item.createTime" :pretime="pretime" />

		<!-- 消息主体：头像 + 内容 -->
		<view class="message-content">
			<image class="user-img" :src="item.avatar" mode="aspectFill" @click="goToDetail(item.userId)"/>
			<view class="bubble">{{ item.content }}</view>
		</view>
	</view>
</template>

<script>
import TimeTag from '@/components/TimeTag/TimeTag.vue';

export default {
	components: {
		TimeTag
	},
	props: {
		item: Object,
		pretime: [Number, String]
	},
	computed: {
		isSelf() {
			const app = getApp();
			if (!app.globalData || !app.globalData.userId) {
				console.warn('Global user ID not set yet');
				return false;
			}
			return this.item.userId === app.globalData.userId;
		}
	},
	methods: {
		// 新增方法：点击头像跳转到好友详情页
		goToDetail(userId) {
			const currentUserId = getApp().globalData.userId;
				
			// 判断是否是自己
			if (userId === currentUserId) {
				uni.navigateTo({
					url: '/pages/mine/user-space'
				});
			}else{
				uni.navigateTo({
					url: `/pages/paper/friend_profile?userId=${userId}`
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.message-item {
	display: flex;
	flex-direction: column; // 改为纵向布局
	align-items: center;
	margin: 20rpx 0;

	.time-tag {
		// 不需要设置 width: 100%;
	}

	.message-content {
		display: flex;
		align-items: start;
		width: 100%;
	}

	.user-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin-right: 20rpx;
	}

	.bubble {
		max-width: 500rpx;
		padding: 20rpx;
		background-color: #f0f0f0;
		border-radius: 16rpx;
		font-size: 28rpx;
		word-break: break-word;
	}

	&.self {
		align-items: center;

		.message-content {
			flex-direction: row-reverse;
		}

		.user-img {
			margin-left: 20rpx;
			margin-right: 0;
		}

		.bubble {
			background-color: #07C160;
			color: white;
		}
	}
}
</style>